import React, { useState, useEffect } from 'react'
import { Table, Button, Modal, Tree } from 'antd'
import { EditOutlined, CloseCircleOutlined } from '@ant-design/icons';
import axios from 'axios'
const { confirm, cancle } = Modal

export default function RoleList() {
  const [dataSource, setdataSource] = useState([])
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      align: 'center',
      render(id) {
        return <b>{id}</b>
      },
    },
    {
      title: '角色名称',
      dataIndex: 'roleName',
      align: 'center',
      render(roleName) {
        return <b>{roleName}</b>
      },
    },
    {
      title: '操作',
      align: "center",
      render(item) {
        return <div>
          <Button style={{ marginRight: "10px" }} type="primary" shape="circle" icon={<EditOutlined />} onClick={() => showModal(item)} />
          <Button type="primary" danger shape="circle" icon={<CloseCircleOutlined />} onClick={() => confirmMethod(item)} />
          <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
            <Tree
              checkable
              onSelect={onSelect}
              onCheck={onCheck}
              treeData={treeData}
            />
          </Modal>
        </div>
      },
    },
  ]
  // 弹出框
  const treeData = [
    {
      title: 'parent 1',
      key: '0-0',
      children: [
        {
          title: 'parent 1-0',
          key: '0-0-0',
          disabled: true,
          children: [
            {
              title: 'leaf',
              key: '0-0-0-0',
              disableCheckbox: true,
            },
            {
              title: 'leaf',
              key: '0-0-0-1',
            },
          ],
        },
        {
          title: 'parent 1-1',
          key: '0-0-1',
          children: [
            {
              title: (
                <span
                  style={{
                    color: '#1890ff',
                  }}
                >
                  sss
                </span>
              ),
              key: '0-0-1-0',
            },
          ],
        },
      ],
    },
  ];
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  // 树形结构
  const onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
  };
  const onCheck = (checkedKeys, info) => {
    console.log('onCheck', checkedKeys, info);
  };
  // 请求数据
  useEffect(() => {
    axios.get('http://localhost:5000/RoleList').then(res => {
      setdataSource(res.data);
    })
  }, [])
  // 删除
  const confirmMethod = (item) => {
    confirm({
      title: '提示',
      content: '您确定删除吗?',
      onOk() {
        deleteMethod(item)
      },
      onCancel() {
        console.log('取消');
      }
    })
  }

  const deleteMethod = (item) => {
    setdataSource(dataSource.filter(data => data.id !== item.id))
    // axios.delete(`http://localhost:5000/jurisdiction/${item.id}`.then(Res=>{
    //   console.log('删除成功');
    // }))
  }

  return (
    <div>
      <Table dataSource={dataSource} columns={columns} rowKey={(item) => item.id}></Table>
    </div>
  )
}
